<template>
  <div>
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
              :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item label="文章分类">
              <j-category-select placeholder="请选择文章分类" v-model:value="queryParam.cataId"
                                 pcode="A01"
                                 @change="(value) => handleFormChange('cataId', value)"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8">
            <a-form-item label="文章标题">
              <j-input placeholder="请输入文章标题" v-model:value="queryParam.title"></j-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :lg="11">
              <a-form-item label="创建时间">
                <a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss"
                               placeholder="请选择开始时间"
                               v-model:value="queryParam.createTime_begin"
                               class="query-group-cust"/>
                <span class="query-group-split-cust">~</span>
                <a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss"
                               placeholder="请选择结束时间"
                               v-model:value="queryParam.createTime_end" class="query-group-cust"/>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
                          style="margin-left: 8px">重置</a-button>
                <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <Icon
                    :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"/>
                </a>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
        </a-button>
<!--        <a-button :loading="exportIconLoading" type="primary" preIcon="ant-design:export-outlined"
                  @click="handleExportXls"> 导出
        </a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
          导入
        </j-upload-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>-->
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>

      <!--字段回显插槽-->
      <template #htmlSlot="{text}">
        <div v-html="text"></div>
      </template>

      <!--状态插槽-->
      <template #statusSlot="{record}">
        <a-badge v-if="record.status===0" color="blue" :text="record.status_dictText" />
        <a-badge v-if="record.status===1" color="green" :text="record.status_dictText" />
        <a-badge v-if="record.status===2" color="red" :text="record.status_dictText" />
      </template>

    </BasicTable>
    <!-- 表单区域 -->
    <TbArticleModal ref="registerModal" @success="handleSuccess"></TbArticleModal>
  </div>
</template>

<script lang="ts" name="tbArticle-tbArticle" setup>
import {reactive, ref} from 'vue';
import {BasicTable, TableAction} from '/@/components/Table';
import {useListPage} from '/@/hooks/system/useListPage';
import {columns} from './TbArticle.data';
import {batchDelete, deleteOne, getExportUrl, getImportUrl, list, statusOne} from './TbArticle.api';
import TbArticleModal from './components/TbArticleModal.vue'
import JCategorySelect from '/@/components/Form/src/jeecg/components/JCategorySelect.vue';
import {loadCategoryData} from '/@/api/common/api';
import {getAuthCache, setAuthCache} from '/@/utils/auth';
import {DB_DICT_DATA_KEY} from '/@/enums/cacheEnum';
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";

const queryParam = ref<any>({cataId: undefined});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const exportIconLoading = ref<boolean>(false);
//注册table数据
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
  tableProps: {
    title: '文章内容',
    api: list,
    columns,
    canResize: false,
    useSearchForm: false,
    striped: true,
    showIndexColumn: true,
    actionColumn: {
      width: 150,
      fixed: 'right',
    },
    beforeFetch: (params) => {
      //[因为状态字符列加了filters] 判断参数是否为数组，数组的话则转换为字符串
      if(params.status){
        params.status = params.status.join(",");
      }
      return Object.assign(params, queryParam.value);
    },
  },
  exportConfig: {
    name: "文章内容",
    url: getExportUrl,
    success: exportXlsSuccess
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess
  },
});
const [registerTable, {
  reload,
  collapseAll,
  updateTableDataRecord,
  findTableDataRecord,
  getDataSource
}, {rowSelection, selectedRowKeys}] = tableContext;
const labelCol = reactive({
  xs: {span: 24},
  sm: {span: 7},
});
const wrapperCol = reactive({
  xs: {span: 24},
  sm: {span: 16},
});

/**
 * 新增事件
 */
function handleAdd() {
  registerModal.value.disableSubmit = false;
  registerModal.value.add();
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  registerModal.value.disableSubmit = false;
  registerModal.value.edit(record);
}

/**
 * 详情
 */
function handleDetail(record: Recordable) {
  registerModal.value.disableSubmit = true;
  registerModal.value.edit(record);
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({id: record.id}, handleSuccess);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
}

/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 发布、撤销事件
 */
async function handleStatus(record, status) {
  await statusOne({ id: record.id, status: status }, handleSuccess);
}

/**
 * 操作栏
 */
function getTableAction(record) {
  let opt = [];
  if(record.status==0 || record.status==2){
    opt = [
      {
        label: '发布',
        icon: 'ant-design:lock-outlined',
        popConfirm: {
          title: '是否确认发布该文章？',
          confirm: handleStatus.bind(null, record, 1),
        }
      },
    ];
  }else if(record.status==1){
    opt = [
      {
        label: '撤销',
        icon: 'ant-design:unlock-outlined',
        popConfirm: {
          title: '是否确认撤销该文章？',
          confirm: handleStatus.bind(null, record, 2),
        }
      },
    ];
  }
  opt.push(
    {
      label: '编辑',
      icon: 'ant-design:edit-outlined',
      onClick: handleEdit.bind(null, record),
    }
  );
  return opt;
}

/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  queryParam.value = {};
  selectedRowKeys.value = [];
  //刷新数据
  reload();
}

/**
 * 导出
 */
function handleExportXls() {
  exportIconLoading.value = true;
  onExportXls();
}

/**
 * 导出成功回调
 */
function exportXlsSuccess(data) {
  exportIconLoading.value = false;
}


/**
 * form点击事件
 * @param value
 */
function handleFormChange(key, value) {
  queryParam.value[key] = value;
}

/**
 * 初始化字典配置
 */
function initDictConfig() {
  loadCategoryData({code: ''}).then((res) => {
    if (res) {
      let allDictDate = getAuthCache(DB_DICT_DATA_KEY);
      if (!allDictDate['']) {
        Object.assign(allDictDate, {'': res})
      }
      setAuthCache(DB_DICT_DATA_KEY, allDictDate)
    }
  });
}

initDictConfig();
</script>

<style lang="less" scoped>
.jeecg-basic-table-form-container {
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }

  .query-group-cust {
    width: calc(50% - 15px);
    min-width: 100px !important;
  }

  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center
  }
}
</style>
